<template>
  <my-nav :items="[
    {'icon': 'User', 'label': 'DashBoard', 'url': '/DashBoard'},
    {'icon': 'User', 'label': '个人信息'},
  ]"/>
  <div class="personal-body">
    <my-list title="当前员工信息" :items="empInfoItems" :column="2"/>
  </div>
</template>

<script setup>
import MyList from "@/components/MyList.vue";
import {MINIO_HOST} from "@/const";
import {dateFormat, genderFormat} from "@/util";
import MyNav from "@/components/MyNav.vue";

/* ==================== 员工详情 ==================== */
// 当前登录的员工信息
const emp = JSON.parse(sessionStorage.getItem('loginEmp'));
// 当前登录的员工头像
let avatar = MINIO_HOST + '/avatar/' + emp['avatar'];

// 员工详情数据
let empInfoItems = [
  {'label': '登录账号', 'value': emp['username'], 'span': 2},
  {'label': '真实姓名', 'value': emp['realname']},
  {'label': '所属部门', 'value': emp['dept'] ? emp['dept']['title'] : '暂未分配部门'},
  {'label': '员工头像', 'value': emp['avatar'], 'type': 'img', 'minio': minio, 'span': 2},
  {'label': '员工年龄', 'value': emp['age']},
  {'label': '员工性别', 'value': emp['gender'], 'type': 'tag', 'format': genderFormat},
  {'label': '所属省份', 'value': emp['province']},
  {'label': '手机号码', 'value': emp['phone']},
  {'label': '微信号码', 'value': emp['wechat']},
  {'label': '电子邮件', 'value': emp['email']},
  {'label': '身份证号', 'value': emp['idcard']},
  {'label': '入职时间', 'value': emp['hiredate'], 'format': dateFormat},
  {'label': '创建时间', 'value': emp['created'], 'format': dateFormat},
  {'label': '修改时间', 'value': emp['updated'], 'format': dateFormat},
  {'label': '详细地址', 'value': emp['address'], 'type': 'card', 'span': 2},
  {'label': '员工描述', 'value': emp['info'], 'type': 'card', 'span': 2},
];

function minio(src) {
  return MINIO_HOST + '/avatar/' + src;
}
</script>

<style scoped lang="scss">
.personal-body {
  margin-top: 20px;
  width: 70%;
}
</style>